<template>
<!--  <div class="ares-flex" :style="cssStyle" :flexNum="flexNum" :id="id" :subAttributes="subAttributes">-->
<!--    <div data-component-active-->
<!--    :class="calClass"-->
<!--    class="flex-item"-->
<!--    :style="calStyle($index)" type="flex-layout-item"-->
<!--    :num="num" v-for="(num, $index) in flexNum"-->
<!--    :key="$index"-->
<!--    :id="id + '-section' + $index">-->
<!--      <slot :name="'section' + $index"></slot>-->
<!--    </div>-->
<!--  </div>-->
  <div class="ares-flex" :style="cssStyle" :flexNum="flexNum" :id="id">
    <slot name="section"></slot>
  </div>
</template>
<script>
/*
扩展ares-ui的flex组件
 */
import guid from '@/utils/guid';

export default {
  name: 'AresFlex',
  props: {
    flexNum: {
      default: 1,
      type: Number,
    },
    id: String,
    cssStyle: {
      default() {
        return {};
      },
      type: Object,
    },
    sections: Object,
    subAttributes: Array,
  },
  computed: {
    calClass() {
      return {
        'ares-row': true,
      };
    },
  },
  created() {
    // console.log('----', this.subAttributes);
  },
  mounted() {
  },
  methods: {
    guid() {
      return guid();
    },
    calStyle(index) {
      // console.log(this.subAttributes[index]);
      return this.subAttributes[index];
      // const attr = this.subAttributes[`${this.id}-section${index}`].props;
      // return attr.width.value === '0px' ? { flex: 1 } : { width: attr.width.value };
    },
  },
};
</script>

<style scoped>
  .ares-flex {
    display: flex;
    width: 100%;
    box-sizing: border-box;
  }
  .ares-flex .flex-item {
    width: 100%;
    position: relative;
  }
</style>
